<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">+</button>
    <p>{{ store.getUserName() }}</p>
    <button @click="removeAction">移除订阅</button>
  </div>
</template>

<script setup>
import { useStore } from '@/store/index'
import { storeToRefs } from 'pinia';

const store = useStore()
console.log(store.secret) // 使用插件全局注册的属性
console.log(store.hello) // 使用插件全局注册的属性
console.log(store.router) // 使用插件全局注册的属性

const { count } = storeToRefs(store)
const { increment } = store

// 或者 Actions 像 methods 一样被调用
// setTimeout(() => {
//   store.remove()
// }, 2000)

// 订阅Actions：使用 store.$onAction() 订阅 action 及其结果。传递给它的回调在 action 之前执行。after 处理 Promise 并允许您在 action 完成后执行函数。以类似的方式，onError 允许您在处理中抛出错误。
const unsubscribe = store.$onAction(
  ({
    name, // action的名字
    store, // store实例
    args, // 调用这个action的参数
    after, // 在这个 action 执行完毕之后，执行这个函数
    onError, // 在这个 action 抛出异常的时候，执行这个函数
  }) => {
    // 记录开始的时间变量
    const startTime = Date.now()
    // 这将在 store 上的操作执行之前触发
    console.log(`Start "${name}" with params [${args.join(' ')}]`)

    // 如果 action 成功并且完全运行后，after 将触发
    // 它将等待任何返回的 promise
    after((result) => {
      console.log(`Finished "${name}" at ${Date.now()}.\nResult: ${result}`)
    })

    // 如果 action 抛出或返回 Promise.reject，onError 将触发
    onError((error) => {
      console.warn(`Failed "${name}" at ${Date.now()}.\nError: ${error}`)
    })
  }
)

const removeAction = () => {
  // 手动移除订阅
  unsubscribe()
}

// 默认情况，当组件被卸载时，它们将被自动删除，如果要在卸载组件后保留它们，将 true 作为第二个参数传递给当前组件的 $onAction中
// someStore.$onAction(callback, true) // 此订阅将在组件被卸载后保留
</script>

<style scoped>

</style>